<template>
  <div class="projectItem">
    <div class="proColor">项目编号 {{ proItem.projectCode }}</div>
    <el-tooltip :content="proItem.projectName" placement="top">
      <div class="proName">{{ proItem.projectName }}</div>
    </el-tooltip>
    <div class="proColor proSize pa-mb-2">{{ proItem.projectTypeName }}</div>
    <div class="proColor proSize pa-mb-2">总投资：{{ proItem.totalAmount }}万元</div>
    <div class="proColor proSize pa-mb-2">项目进度</div>
    <el-steps :active="active" align-center>
      <el-step title="项目立项阶段"></el-step>
      <el-step title="规划许可阶段"></el-step>
      <el-step title="施工许可阶段"></el-step>
      <el-step title="竣工验收阶段"></el-step>
    </el-steps>
    <img
      v-if="proItem.warningTime"
      class="img"
      @click="dialogVisible = true"
      src="@/assets/images/manage/warn.png"
      alt
    />
    <el-button class="button" @click="managePro">管理项目</el-button>
    <el-button class="button button2" @click="editTag">标签</el-button>
    <DialogWrap dialogTitle="预警事件" :dialogVisible.sync="dialogVisible" :showClose="true">
      <template #content>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" :index="indexMethod" label="序号" width="100"></el-table-column>
          <el-table-column prop="eventName" label="预警事项" width="180"></el-table-column>
          <el-table-column prop="buildingTime" label="预计完成时间"></el-table-column>
          <el-table-column prop="warningStatus" label="预警状态"></el-table-column>
          <el-table-column prop="operation" label="操作">
            <template slot-scope="scope">
              <span class="cancel" @click="updateWarnStatus(scope.row.id)">取消预警</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </template>
    </DialogWrap>
    <ProjectTag ref="ProjectTagRef" />
  </div>
</template>
<script>
import DialogWrap from '@/components/DialogWrap'
import ProjectTag from './projectTag'
import { getWarnPageApi, updateWarnStatusApi } from '@/api/manageApi.js'
export default {
  components: {
    DialogWrap,
    ProjectTag
  },
  props: {
    proItem: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    dialogVisible (val) {
      if (val) {
        this.getWarnPageApi()
      }
    }
  },
  computed: {
    active () {
      return this.proItem.stage - 1
    }
  },
  data () {
    return {
      dialogVisible: false,
      tableData: [],
      total: 0,
      current: 1,
      pageSize: 10
    }
  },
  methods: {
    managePro () {
      this.$router.push({
        path: '/my/manage/proDetail',
        query: {
          id: this.proItem.id,
          name: this.proItem.projectName
        }
      })
    },
    editTag() {
      this.$refs.ProjectTagRef.open(this.proItem)
    },
    indexMethod (index) {
      return index < 10 ? '0' + (index + 1) : index + 1
    },
    getWarnPageApi () {
      getWarnPageApi({
        pageSize: this.pageSize,
        pageNo: this.current,
        projectUnit: this.proItem.projectUnit,
        projectName: this.proItem.projectName,
        projectNature: this.proItem.projectNature,
        warningStatus: 2
      }).then(res => {
        if ((res.code = 0)) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },
    // 取消预警
    updateWarnStatus (id) {
      updateWarnStatusApi({
        id
      }).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
        }
      })
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.getWarnPageApi()
    },
    handleCurrentChange (val) {
      this.current = val
      this.getWarnPageApi()
    }
  }
}
</script>
<style lang="scss" scoped>
.projectItem {
  width: 560px;
  height: 289px;
  background: #ffffff;
  box-shadow: 0px 12px 116px 0px rgba(196, 203, 214, 0.1);
  border-radius: 48px;
  padding: 30px 36px;
  position: relative;
  .proColor {
    color: #999999;
  }
  .proSize {
    font-size: 19px;
  }
  .proName {
    width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 24px;
    color: #0a1629;
    margin: 14px 0 10px 0;
  }
  .img {
    width: 55px;
    height: 55px;
    position: absolute;
    top: 31px;
    right: 215px;
    cursor: pointer;
  }
  .button {
    width: 113px;
    height: 40px;
    background: #408cff;
    border-radius: 10px;
    color: #fff;
    position: absolute;
    top: 35px;
    right: 42px;
    margin-top: 12px;
  }
  .button2 {
    position: absolute;
    top: 80px;
    right: 42px;
  }
  .cancel {
    font-size: 12px;
    color: #4880ff;
  }
  .pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
  }
  ::v-deep .el-step__head.is-finish {
    color: #1ec05f;
    border-color: #1ec05f;
  }
  ::v-deep .el-step__title.is-finish {
    color: #c0c4cc;
  }
  ::v-deep .el-step__head.is-process {
    color: #ffad0f;
    border-color: #ffad0f;
  }
  ::v-deep .is-finish .el-step__line {
    background-color: #1ec05f;
  }
}
@media (min-width: 1280px) {
  .projectItem {
    width: 468px;
    padding: 28px 32px;
  }
}
</style>
